<template>
    <div id="jx-student-virtual-machine" class="jx-virtual-machine"
        v-loading="deskLoading"
        :element-loading-text="deskLoadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="jx-virtual-machine-header">
            <div class="jx-virtual-machine-header-logo fl" :title="courseName" v-text="courseName"></div>
            <div class="jx-virtual-machine-nav fl" v-show="!fullScreen">
                <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">实训手册</span>
                <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)">实训笔记</span>
            </div>
            <div class="jx-virtual-machine-header-info fr">
                <span>虚拟机信息</span>
                <el-tooltip effect="light" placement="top">
                    <div slot="content" v-if="VirtualMachineInfo.mode">
                        模板类型：<span v-if="VirtualMachineInfo.mode == 1">单节点</span>
                        <span v-else-if="VirtualMachineInfo.mode == 2">集群</span>
                        <p style="line-height:20px;" v-for="(item, index) in VirtualMachineInfo.containers">
                            {{ item.containerRole }}<br />IP：{{ item.ip }}<br/>配置：{{ item.flavor }} <br/>镜像名称：{{ item.imageName }}</p>
                    </div>
                    <div slot="content" v-else>
                        暂无虚拟机信息
                    </div>
                    <i class="iconfont icon-jingshi"></i>
                </el-tooltip>
            </div>
            <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
                <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr"  @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
            </div>
        </div>
        <div class="jx-virtual-machine-main">
            <div class="step-main-content fl" v-show="!fullScreen">
                <div class="tab-main" v-if="activeIndex == 1">
                    <div class="jx-main-content" v-if="laboratoryManualData">
                        <div class="step-main-content-text">
                            <div class="markdown-body" v-html="laboratoryManualData"></div>
                        </div>
                    </div>
                    <div class="jx-main-content" v-else>
                        <div class="jx-content-tips nodata-box">
                           <p>暂无内容</p>
                        </div>
                    </div>
                </div>
                <div class="tab-main" v-show="activeIndex == 2">
                    <div class="jx-main-content">
                        <div class="step-main-content-box">
                            <mavonEditor id="note-editor" class="step-main-editor" ref="question"></mavonEditor>
                        </div>
                        <div class="step-main-btn-group">
                            <!-- <button @click="" class="button-style">预览</button> -->
                            <button class="button-style" @click="NoteSave(1)">保存</button>
                            <button @click="downloadWord" class="button-style">下载</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="step-main-mirror fl">
                <div class="mirror-iframe" v-if="!mirrorIframeTip">
                    <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
                </div>
                <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
                    <img src="./../../../assets/images/mirror_iframe_tip.png" />
                    <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
                    <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
                </div>
                <div class="step-main-mirror-side" v-if="fullScreen">
                    <ul>
                        <li @click="HandbookDialog"><i class="iconfont icon-shiyongshouce"></i>手册</li>
                        <li @click="NotesDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
                </div>
                <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl">
                    <div class="step-main-mirror-dialog-block">
                        <div class="step-main-mirror-dialog-box">
                            <div class="mirror-dialog-header">
                                <!-- 计时
                                <span>{{ getHour(resQuestionData.timeLeft) }}</span> -->
                                <Time :autoStart="true"></Time>
                            </div>
                            <div class="mirror-dialog-item">
                                <div class="item-btn">
                                    <span @click="refreshVirtual(0)"><i class="iconfont icon-shuaxin"></i>刷新</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="InitVirtual"><i class="iconfont icon-zhongxinshiyang"></i>初始化</span>
                                    <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                                        <i class="iconfont icon-wenti-m"></i>
                                    </el-tooltip>
                                </div>
                                <div class="item-btn" v-if="!fullScreen">
                                    <span @click="VirtualFullScreen(2)"><i class="iconfont icon-full-screen"></i>虚拟机全屏</span>
                                </div>
                                <div class="item-btn" v-if="fullScreen">
                                    <span @click="VirtualFullScreen(3)"><i class="iconfont icon-full-screen"></i>退出全屏</span>
                                </div>
                            </div>
                            <div class="mirror-dialog-item">
                                <div class="item-btn">
                                    <span @click="SftpConfig"><i class="iconfont icon-upload"></i>SFTP工具</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="UploadFile"><i class="iconfont icon-shangchuan-"></i>文件上传</span>
                                    <!-- <el-tooltip class="item" effect="light" content="上传文件至虚拟机/root/tools/文件夹" placement="left-end" style="position:absolute; right: -10px; top: 5px;">
                                        <i class="iconfont icon-wenti-m"></i>
                                    </el-tooltip> -->
                                </div>
                                <div class="item-btn">
                                    <span @click="DownloadFile"><i class="iconfont icon-tubiaozhizuo-"></i>下载文件</span>
                                </div>
                            </div>
                            <div class="mirror-dialog-item">
                                <div class="item-btn">
                                    <span @click="ExperimentScreenshot"><i class="iconfont icon-jietu1"></i>实验截图</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="CutDialog"><i class="iconfont icon-jietu"></i>剪切板</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
                        <div>工具栏</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 实验截图 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
            <div class="dialog-content clear-fix">
                <img :src="dialogScreenshotUrl" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
                <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
            </span>
        </el-dialog>
        <!-- 学生实验手册显示隐藏 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-handbook" title="学生实验手册显示隐藏" :visible.sync="dialogHandbook" width="460px">
            <div class="dialog-content clear-fix">
                <p>控制该章节学生端所有实验手册显隐</p>
                <p>当前学生端实验手册为 <span>显示</span></p>
                <div class="handbook-item">
                    <span class="item-label">设置：</span>
                    <el-radio-group>
                        <el-radio label="显示"></el-radio>
                        <el-radio label="隐藏"></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
                <el-button class="button-style" @click="dialogHandbook = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 手册 -->
        <el-dialog
            class="dialog-hand-book"
            v-dialogDrag
            title="实训手册"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogHandbookDrag"
            :modal-append-to-body="false">
            <div class="dialog-body">
                <div class="markdown-body" v-html="laboratoryManualData"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogHandbookDrag = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 实训笔记 -->
        <el-dialog
            class="dialog-hand-note"
            v-dialogDrag
            title="实训笔记"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogNotesDrag"
            :modal-append-to-body="false">
            <div class="dialog-body">
                <mavonEditor style="min-height: 300px;" ref="questionDialog"></mavonEditor>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="NoteSave(2)">确定</el-button>
            </div>
        </el-dialog>
        <!-- 下载文件 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-download-file" title="从实验环境导出代码" :visible.sync="dialogDownload" width="480px">
            <div class="dialog-content">
                <p>将需要的代码文件放入到"/data"目录, 点击下载会把该目录打包下载。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <a @click="DownloadSave" class="button-style" style="width:90px;" :href="'/tes/experiment/training/'+trainingId+'/download'">下 载</a> -->
                <el-button class="button-style" @click="DownloadSave">下 载</el-button>
                <el-button class="button-style" @click="dialogDownload = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- SFTP -->
        <el-dialog :close-on-click-modal="false" class="sftp-dialog" title="SFTP工具" :visible.sync="dialogSftp" width="50%">
            <div class="sftp-content">
                <div class="sftp-header">
                    <div class="sftp-title">
                        您可以使用SFTP工具上传、下载文件:
                    </div>
                    <p>SFTP访问的地址为 <span>{{ sftpIp[0] }}</span></p>
                    <p>用户名 : <span>root </span> 密码 : <span>root</span></p>
                </div>
                <div class="sftp-desc">
                    <div class="sftp-title">
                        使用说明
                    </div>
                    <div class="desc-item">
                        <p>1.请先下载SFTP工具
                            <a :href="sftpIp[1]+'/psftp_64.exe'">
                                <i class="iconfont icon-tubiaozhizuo-">
                                    <img src="./../../../assets/images/sftp_icon1.png" />
                                </i>
                            </a>
                            <a :href="sftpIp[1]+'/psftp_32.exe'">
                                <i class="iconfont icon-tubiaozhizuo-">
                                    <img src="./../../../assets/images/sftp_icon2.png" />
                                </i>
                            </a>
                        </p>
                        <p>2.使用登陆命令<span>open username@host post</span></p>
                        <p>说明：username为用户名 host 为主机地址，post为端口号</p>
                        <p>3.填写密码进入SFTP环境。</p>
                        <p>4.上传命令<span>put dir/something.txt dir/another.txt</span></p>
                        <p>说明：dir/something.txt 为用户当前环境的地址+文件。dir/another.txt为虚拟环境的地址加文件。</p>
                        <p>例如：命令 put D:/bigdata.sql /home/bigdata.sql 则是把本地D盘的bigdata.sql 文件上传至虚拟环境home 目录。</p>
                        <p>5.下载命令 <span>get dir/something.txt dir/another.txt</span></p>
                        <p>说明：dir/something.txt 为虚拟环境的地址加文件。dir/another.txt用户当前环境的地址+文件。</p>
                        <p>例如：命令 get /home/bigdata.sql  E:/bigdata.sql  则是把虚拟环境home 目录的bigdata.sql 文件下载至的本地E盘。</p>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogSftp = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 剪切板 -->
        <el-dialog :close-on-click-modal="false" class="cut-dialog" title="剪切板" :visible.sync="dialogCut" width="655px"  @close="CutCloseDialog">
            <div class="cut-title">
                <p><span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
            </div>
            <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
                <el-form-item prop="desc">
                    <el-input type="textarea" @input="CutContentInput" maxlength="20000" v-model="cutData.cutRuleForm.desc" style="height:200px;"></el-input>
                    <div class="desc-num">{{cutData.cutRuleForm.descNum}}/20000</div>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button  class="button-style" @click="cutSubmitForm('cutRuleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 文件上传 -->
        <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="文件上传" :visible.sync="dialogFileUpload" width="460px" @close="CloseFileUploadDialog">
            <el-form :model="FileUploadForm" :rules="FileUploadRules" ref="FileUploadForm">
                <el-form-item class="version-file">
                    <el-button class="button-style">上传文件<input id="version-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
                    <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">上传文件至虚拟机/root/tools/文件夹</p>
                    <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="FileUploadForm.versionFile.length>0">已选: {{FileUploadForm.versionFile}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button class="button-style" style="width: 100px;" @click="UploadSave('FileUploadForm')">上传至虚机</el-button>
            </div>
        </el-dialog>
        <!-- 关闭分享 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-download-file" title="关闭分享" :visible.sync="dialogCloseShare" width="460px">
            <div class="dialog-content">
                <p>是否关闭分享</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button class="button-style" @click="CloseShare">关 闭</el-button> -->
                <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 配置提示弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-config-tip" title="提示" :visible.sync="dialogConfigTip" width="460px">
            <div class="dialog-content">
                <p>虚拟机配置已被修改，点击'确定'将立即重启虚拟机。点击'取消'稍后可通过'刷新'功能重启虚拟机。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogConfigTip = false">取 消</el-button>
                <el-button class="button-style" @click="DialogConfigTip">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 初始化弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
            <div class="dialog-content">
                <p>初始化会丢失文件、数据，确定要初始化吗?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            class="bigger-dialog"
            :visible.sync="bigger"
            >
            <img :src="biggerImgPath">
        </el-dialog>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor"
    import Time from '../../../components/Time'
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    export default {
        components: {
            mavonEditor,
            Time
        },
        data () {
            return {
                // 浏览器分辨率
                ScreenSigma: '',
                //桌面loading
                deskLoading: false,
                deskLoadingText: '桌面加載中',

                contentLoading: null,
                // 课程ID
                courseId: '',
                // 章节ID
                chapterId: '',
                // 实训ID
                trainingId: '',
                // 课程名称
                courseName: '',
                // 导航active
                activeIndex: 1,
                // 实验手册data
                experimentVideoData: '',
                laboratoryManualData: '',
                // 虚机信息
                VirtualMachineInfo: '',
                // 虚机全屏fullScreen
                fullScreen: false,
                // 虚机地址
                VirtualMachineUrl: '',
                VirtualMachineUrlArr: [],
                // 虚机当前ID数组
                VirtualMachineIdArr: [],
                // 虚机当前容器ID
                VirtualMachineId: '',
                // 虚机当前镜像ID
                VirtualImageId: '',
                iframeHeight: '',
                // 虚机切换导航列表
                virtualMachineNavList: [],
                // 虚机导航列表index
                MachineNavTabIndex: '0',
                // 虚拟机id
                containerId: '',
                toolbarsMav: {
                    bold: true, // 粗体
                    italic: false, // 斜体
                    header: true, // 标题
                    //underline: true, // 下划线
                    //strikethrough: true, // 中划线
                    //mark: true, // 标记
                    //superscript: true, // 上角标
                    //subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    help: true, // 帮助
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    preview: true, // 预览
                    fullscreen: true    // 全屏编辑
                },

                // 关闭分享
                dialogCloseShare: false,
                // 实验截图
                dialogScreenshot: false,
                dialogScreenshotCopyUrl: '',
                // 实验截图url
                dialogScreenshotUrl: '',
                // 学生手册
                dialogHandbook: false,
                // 手册拖拽
                dialogHandbookDrag: false,
                // 实训笔记拖拽
                dialogNotesDrag: false,
                // 下载文件弹窗
                dialogDownload:  false,
                // sftp
                dialogSftp: false,
                // Sftp ip
                sftpIp: '',
                // 剪切板dialog
                dialogCut: false,
                cutData: {
                    cutRuleForm: {
                        desc: '',
                        descNum: 20000
                    },
                    cutRules: {
                        desc: [
                            { required: true, message: '请填写内容', trigger: 'blur' }
                        ]
                    }
                },
                // 文件上传dialog
                dialogFileUpload: false,
                FileUploadForm: {
                    fileName: '',
                    versionFile: ''
                },
                FileUploadRules: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                },
                val: '123',
                // 虚机右侧导航
                mirrorRightWidth: 0,

                // 统计删除
                DeleteWebsock: null,
                DeleteWebsockOver: null,

                // 配置提示弹窗
                dialogConfigTip: false,

                // 初始化弹窗
                dialogInitVirtual: false,

                // 错误提示
                mirrorIframeTip: false,
                mirrorIframeTipText: '',

                // 图片放大
                biggerImgPath: '',
                bigger: false,
            }
        },
        created () {
            let self = this
            // 课程ID
            self.courseId = self.$localstorage.getLocalStorage('setCourseId')
            // 章节ID
            // self.chapterId = self.$localstorage.getLocalStorage('chapterInfoData').chapterId
            // 实训ID
            self.trainingId = self.$route.query.trainingId
            self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
            self.$nextTick(function () {
                self.iframeHeight = $(window).height() - 60
                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                window.onresize = function () {
                    if(self.fullScreen){
                        $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                        setTimeout(() => {
                            $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                        }, 1000);
                    }else{
                        self.iframeHeight = $(window).height() - 60
                        $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * self.iframeHeight)
                        $('.jx-virtual-machine-main').height(self.iframeHeight)
                        $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                    }
                }
                // if(window.screen.width <= 1280){
                //     self.fullScreen = true
                //     $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                //     setTimeout(() => {
                //         $('.mirror-iframe').width($(".step-main-mirror").width())
                //     }, 1000);
                // }

                // 设置编辑器高度
                $('.step-main-editor').css({
                    'height': $(window).height() - 220 + 'px'
                })
                $('.step-main-editor .v-note-wrapper').css({
                    'height': '100%',
                    'z-index': '1'
                })

            })

            // 初始化学习手册
            self.InitManual()
            // 初始化进入实验
            self.InitExperiment(0)

            // 初始化头部信息
            self.InitHeaderInfo()
        },
        mounted () {
            this.$refs.question.toolbars = this.toolbarsMav;
        },
        methods: {
            downloadWord(){
                let self = this;
                $("#note-editor .v-show-content").wordExport('实验笔记');
            },
            // 统计删除socket
            InitDelectWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/experiment/training/"+self.trainingId
                self.DeleteWebsock = new WebSocket(wsuri);
                self.DeleteWebsock.onopen = self.Deletewebsocketonopen;
                self.DeleteWebsock.onmessage = self.Deletewebsocketonmessage;
                self.DeleteWebsockOver = () => {
                    self.DeleteWebsock.close()
                }
            },
            Deletewebsocketonopen(){
                console.log('open sucess')
            },
            Deletewebsocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data)
                if(redata.type == 9){
                    this.dialogConfigTip = true
                }
            },
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/training/'+self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.trainingName
                        // // 章节名称
                        // self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化实训手册
            InitManual(){
                let self = this
                self.$http.get('/tes/training/manual/'+self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.laboratoryManualData = res.data.htmlContent
                        self.$nextTick(() => {
                            $('.markdown-body p img').on('click', function(){
                                self.biggerImgPath = $(this).attr('src')
                                self.bigger = true
                            })
                        })
                    }else if(res.code == '404'){
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 配置虚拟机
            DialogConfigTip(){
                let self = this
                self.MachineNavTabIndex = 0
                self.dialogInitVirtual = false
                self.dialogConfigTip = false
                self.dialogScreenshot = false
                self.dialogHandbook = false
                self.dialogHandbookDrag = false
                self.dialogNotesDrag = false
                self.dialogDownload = false
                self.dialogSftp = false
                self.dialogCut = false
                self.dialogFileUpload = false
                self.dialogCloseShare = false
                self.InitExperiment(0)
            },
            // 初始化进入实验
            InitExperiment(index){
                // index 虚机index
                let self = this
                self.fullScreen = false

                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                // 清空虚机切换列表导航集合
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.$http.get('/tes/experiment/training/'+self.trainingId).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        self.VirtualMachineInfo = res.data

                        setTimeout(() => {
                            self.iframeHeight = $(window).height() - 60
                            $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }, 800);


                        // 虚机容器ID
                        self.VirtualMachineId = res.data.containers[index].containerId
                        // 虚机镜像id
                        self.VirtualImageId = res.data.containers[index].imageId

                        self.fullScreen = false
                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                            fullData.push(res.data.containers[i].containerId)
                        }
                        if (res.data.containers[0].fullScreen) {
                            self.VirtualFullScreen(1,fullData)
                        }
                        setTimeout(() => {
                            // 虚机地址默认设置主节点
                            self.VirtualMachineUrl = res.data.containers[index].desktopUrl

                            // 虚机地址数组
                            self.VirtualMachineUrlArr = res.data.containers
                            if(self.VirtualMachineUrlArr.length > 0){
                                self.InitDelectWebSocket()
                            }
                            self.deskLoading = false
                            if(self.ScreenSigma < 1.44){
                                self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    closeOnClickModal: false
                                }).then(() => {
                                    self.VirtualFullScreen(2)
                                })
                            }
                        }, 800);
                    }else{
                        // self.deskLoading = false
                        // self.$message.error(res.message)
                        // 错误提示
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // tab切换
            MachineNavTab(index) {
                let self = this
                if(index == 2){
                    self.$http.get('/tes/training/report/'+ self.trainingId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$refs.question.value = res.data.conTent
                        }else if(res.code == '404'){
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
                self.activeIndex = index
            },
            // 实训手册保存
            NoteSave(tag){
                // tag 1. 左侧实验手册2.实验手册弹窗
                let self = this
                let data = {}
                if(tag == 1){
                    data.content = self.$refs.question.value
                    data.htmlContent = self.$refs.question.getRender()
                    if (self.$refs.question.value == '') {
                        self.$message.error('请填写实训笔记')
                        return
                    }
                }else if(tag == 2){
                    data.content = self.$refs.questionDialog.value
                    data.htmlContent = self.$refs.questionDialog.getRender()
                    if (self.$refs.questionDialog.value == '') {
                        self.$message.error('请填写实训笔记')
                        return
                    }
                }
                self.$http.post('/tes/training/report/'+ self.trainingId,data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '实训笔记保存成功',
                            type: 'success'
                        })
                        if(tag == 2){
                            // 重新初始化笔记数据
                            self.$http.get('/tes/training/report/'+ self.trainingId).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$refs.question.value = res.data.conTent
                                }else if(res.code == '404'){
                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚机导航列表切换
            MachineNavTab2(index, item){
                let self = this
                self.MachineNavTabIndex = index

                self.VirtualMachineId = item.containerId
                // 重新初始化进入实验
                // self.InitExperiment(index, true)
            },
            // 刷新虚机
            refreshVirtual(index){
                let self = this
                self.MachineNavTabIndex = index;
                // 关闭手册拖拽弹窗
                self.dialogHandbookDrag = false
                self.dialogNotesDrag = false
                // 重新初始化进入实验
                // self.InitExperiment(index)

                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                // 清空虚机切换列表导航集合
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.$http.get('/tes/experiment/training/'+self.trainingId).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        if(res.data.containers[0].fullScreen){
                            self.fullScreen = true;
                        }
                        // 初始化虚拟机信息
                        // self.VirtualMachineInfo = res.data

                        // 虚机地址默认设置主节点
                        self.VirtualMachineUrl = res.data.containers[index].desktopUrl

                        // 虚机地址数组
                        self.VirtualMachineUrlArr = res.data.containers
                        // 虚机容器ID
                        self.VirtualMachineId = res.data.containers[index].containerId
                        // 虚机镜像id
                        self.VirtualImageId = res.data.containers[index].imageId

                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                            fullData.push(res.data.containers[i].containerId)
                        }
                        if(!res.data.containers[0].fullScreen){
                            self.fullScreen = false;
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60;
                                $(".mirror-iframe, .step-main-mirror").width(
                                1024 / 768 * ($(window).height() - 60)
                                );
                                $(".jx-virtual-machine-main").height(self.iframeHeight);
                                $(".step-main-content").width(
                                $(window).width() - $(".step-main-mirror").width()
                                );
                            }, 800);
                        }
                        self.deskLoading = false;
                    }else{
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化虚机
            InitVirtual(index) {
                let self = this
                self.dialogInitVirtual = true
            },
            DialogInitVirtualSave(index){
                let self = this

                // 关闭手册拖拽弹窗
                self.dialogHandbookDrag = false
                self.dialogNotesDrag = false
                self.MachineNavTabIndex = 0
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.fullScreen = false

                self.dialogInitVirtual = false
                self.deskLoading = true
                self.deskLoadingText = '初始化中'
                self.$http.get('/tes/experiment/training/'+self.trainingId+'/init').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        self.VirtualMachineInfo = res.data

                        setTimeout(() => {
                            self.iframeHeight = $(window).height() - 60
                            $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }, 800);
                        // self.deskLoading = false


                        // 虚机ID
                        self.VirtualMachineId = res.data.containers[index].containerId

                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            self.virtualMachineNavList.push(res.data.containers[i].containerRole)

                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                        }
                        if (res.data.containers[0].fullScreen) {
                            self.VirtualFullScreen(1,fullData)
                        }

                        // self.$message({
                        //     type: 'success',
                        //     message: '初始化成功!'
                        // })
                        // if(self.ScreenSigma < 1.44){
                        //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                        //         confirmButtonText: '确定',
                        //         cancelButtonText: '取消',
                        //         type: 'warning',
                        //         closeOnClickModal: false
                        //     }).then(() => {
                        //         self.VirtualFullScreen(2)
                        //     })
                        // }
                        setTimeout(() => {
                            // 虚机地址默认设置主节点
                            self.VirtualMachineUrl = res.data.containers[index].desktopUrl
                            // 虚机地址数组
                            self.VirtualMachineUrlArr = res.data.containers
                            self.deskLoading = false
                            self.$message({
                                type: 'success',
                                message: '初始化成功!'
                            })
                            if(self.ScreenSigma < 1.44){
                                self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    closeOnClickModal: false
                                }).then(() => {
                                    self.VirtualFullScreen(2)
                                })
                            }
                        }, 5000);
                    }else{
                        setTimeout(() => {
                            self.iframeHeight = $(window).height() - 60
                            $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }, 800);
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 全屏
            VirtualFullScreen(index,fullData){
                let self = this
                const loading = self.$loading({
                    lock: true,
                    text: '虚机切换中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                // self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/display?length='+$(window).width()+'&width='+self.iframeHeight).then(response => {
                let data = {}
                if(index == 1){
                    data = {
                        containerIds: fullData,
                        length: '1024',
                        width: '768',
                        fullScreen: false
                    }
                }else if(index == 2){
                    data = {
                        containerIds: self.VirtualMachineIdArr,
                        length: window.screen.availWidth,
                        width: self.iframeHeight,
                        fullScreen: true
                    }
                }else if(index == 3){
                    // 退出全屏
                    // 关闭手册拖拽弹窗
                    self.dialogHandbookDrag = false
                    self.dialogNotesDrag = false
                    data = {
                        containerIds: self.VirtualMachineIdArr,
                        length: '1024',
                        width: '768',
                        fullScreen: false
                    }
                }
                self.$http.post('/tes/experiment/container/display',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 关闭loading
                        loading.close()
                        if(index == 2){
                            self.fullScreen = true
                            $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                            setTimeout(() => {
                                $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                            }, 1000);
                        }else if(index == 3 || index == 1){
                            self.fullScreen = false
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60
                                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                                $('.jx-virtual-machine-main').height(self.iframeHeight)
                                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                            }, 1000);
                        }
                    }else{
                        // 关闭loading
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // stfp工具
            SftpConfig() {
                let self = this
                self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/ftp').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let sftpArr = res.data.split('@')
                        self.sftpIp = sftpArr
                        self.dialogSftp = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 剪贴板字符限制
            CutContentInput(){
                let self = this
                let MirrorTextLength = self.cutData.cutRuleForm.desc.length
                self.cutData.cutRuleForm.descNum = 20000 - MirrorTextLength
            },
            // 剪切板弹窗
            CutDialog(){
                let self = this
                self.dialogCut = true
                self.cutData.cutRuleForm.descNum = 20000
                self.cutData.cutRuleForm.desc = ''
            },
            CutCloseDialog(){
                let self = this
                self.$refs['cutRuleForm'].resetFields()
            },
            // 剪切板表单提交
            cutSubmitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = self.$loading({
                            lock: true,
                            text: '剪切文件提交中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/experiment/container/'+self.VirtualMachineId+'/clipboard',{
                            content: self.cutData.cutRuleForm.desc
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                loading.close()
                                self.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                self.dialogCut = false
                            }else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            // 文件上传弹窗显示
            UploadFile(){
                let self = this
                self.FileUploadForm.fileName = ''
                self.FileUploadForm.versionFile = ''
                self.dialogFileUpload = true
                $('#version-file-upload').val('')
            },
            // 文件上传清除上传提示文本
            CloseFileUploadDialog(){
                let self = this
                self.FileUploadForm.fileName = ''
                $('#version-file-upload').val('')
            },
            // 上传文件
            getFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                self.FileUploadForm.fileName = $event.target.files[0]
                self.FileUploadForm.versionFile = $event.target.files[0].name
            },
            // 保存上传文件
            UploadSave(form){
                let self = this
                if(self.FileUploadForm.fileName == ''){
                    self.$message.error('请上传文件')
                    return
                }
                self.contentLoading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.FileUploadForm.fileName)
				self.$http.post('/tes/experiment/container/'+self.VirtualMachineId+'/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.dialogFileUpload = false
                        self.contentLoading.close()
                        self.$refs[form].resetFields()
                    }else{
                        self.contentLoading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            // 实验截图
            ExperimentScreenshot(){
                let self = this
                var vir = document.getElementById('VirtualMachineIframe' + self.VirtualMachineId)
                self.dialogScreenshotUrl = self.convertCanvasToImage(vir.contentWindow.document.getElementsByTagName('canvas')[0]).getAttribute("src")

                self.$http.post('/tes/base64/file-save',{
                    'base64Info' : self.dialogScreenshotUrl
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.dialogScreenshotCopyUrl = res.data
                        self.dialogScreenshot = true
                    }
                })
            },
            convertCanvasToImage(canvas) {
                let image = new Image();
                image.crossOrigin = "anonymous";
                image.src = canvas.toDataURL("image/png");
                return image;
            },
            // 实验截图复制
            dialogScreenshotCopy() {
                let self = this
                var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
                clipboard.on('success', e => {
                    self.$message({
                        message: '复制成功，请在编辑器粘贴',
                        type: 'success'
                    })
                    self.dialogScreenshot = false
                    e.clearSelection();
                })
                clipboard.on('error', e => {
                    // 不支持复制
                    console.log('该浏览器不支持自动复制')
                    // 释放内存
                    clipboard.destroy()
                })
            },
            // 实验截图保存下载图片
            dialogScreenshotSave() {
                let self = this
                self.downloadFile('截图.png', self.dialogScreenshotUrl);
            },
            // 下载
            downloadFile(fileName, content) {
                let aLink = document.createElement('a');
                let blob = this.base64ToBlob(content); //new Blob([content]);

                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                aLink.download = fileName;
                aLink.href = URL.createObjectURL(blob);

                // aLink.dispatchEvent(evt);
                aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            },
            // base64转blob
            base64ToBlob(code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;

                let uInt8Array = new Uint8Array(rawLength);

                for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {type: contentType});
            },

            // 下载文件
            DownloadFile() {
                let self = this
                self.dialogDownload = true
            },
            // 下载文件确定
            // DownloadSave() {
            //     let self = this
            //     self.dialogDownload = false
            //     const loading = self.$loading({
            //         lock: true,
            //         text: '正在下载',
            //         background: 'rgba(0, 0, 0, 0.7)'
            //     })
            //     self.$http.get('/tes/experiment/training/'+self.trainingId+'/download',
            //         {responseType: 'blob'}) .then((response) => {
            //         let blob = new Blob([response.data], {type: response.headers['content-disposition']});
            //         var str = response.headers['content-disposition']
            //         str = str.match(/''(\S*?).zip/)[1]
            //         let fileName = decodeURI(str)+'.zip'
            //         let url = window.URL.createObjectURL(blob);
            //         let downloadElement = document.createElement('a');
            //         downloadElement.style.display = 'none';
            //         downloadElement.href = url;
            //         downloadElement.download = fileName; //下载后文件名
            //         document.body.appendChild(downloadElement);
            //         downloadElement.click(); //点击下载
            //         document.body.removeChild(downloadElement); //下载完成移除元素
            //         window.URL.revokeObjectURL(url);
            //         loading.close()
            //     }).catch(err => {
            //           console.log(err)
            //     })
            // },
            // 下载文件确定
            DownloadSave() {
                let self = this
                self.dialogDownload = false
                const loading = self.$loading({
                    lock: true,
                    text: '正在下载',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.get('/tes/experiment/training/'+self.trainingId+'/zip') .then((response) => {
                    let res = response.data
                    if(res.code == 200){
                        loading.close()
                        // self.DownLoadZip()
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href =  '/tes/experiment/training/'+self.trainingId+'/download';
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })

            },
            DownLoadZip(){
                let self = this
                self.$http.get('/tes/experiment/training/'+self.trainingId+'/download',
                    {responseType: 'blob'}) .then((response) => {
                    let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                    var str = response.headers['content-disposition']
                    str = str.match(/''(\S*?).zip/)[1]
                    let fileName = decodeURI(str)+'.zip'
                    let url = window.URL.createObjectURL(blob);
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                }).catch(err => {
                      console.log(err)
                })
            },
            HandbookDialog(){
                let self = this
                self.dialogHandbookDrag = true
                self.$nextTick(() => {
                    $('.markdown-body p img').on('click', function(){
                        self.biggerImgPath = $(this).attr('src')
                        self.bigger = true
                    })
                })
            },
            // 实训笔记弹窗
            NotesDialog(){
                let self = this
                self.dialogNotesDrag = true
                self.$nextTick(() => {
                    self.$refs.questionDialog.toolbars = self.toolbarsMav;
                })
                self.$http.get('/tes/training/report/'+self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$nextTick(() => {
                            self.$refs.questionDialog.value = res.data.conTent
                        })
                    }else if(res.code == '404'){
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //消息通知
            NoteSelect(){
                let self = this
            },
            greet(val){
                this.val = val;
            },
            // 虚机右侧菜单显示隐藏
            MirrorArrowFn() {
                let self = this
                if(self.mirrorRightWidth == -144){
                    self.mirrorRightWidth = 0
                }else{
                    self.mirrorRightWidth = -144
                }
            },
        }
    }
</script>


<style lang="scss" >
    @import "./../../../styles/layout/color_variables";
    #jx-student-virtual-machine{
        position: relative;
        height: 100%;
        overflow: hidden;
        .tab-main {
            .jx-main-content {
                width: 100%;
                background: $white;
                padding: 20px;
                box-sizing: border-box;
            }
        }
        .jx-content-tips{
            text-align: center;
            margin-top: 100px;
            padding-top: 0;
            box-shadow: none;
            &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
        .jx-content {
            width: 100%;
            min-height: 600px;
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        .jx-virtual-machine-header{
            height: 60px;
            line-height: 60px;
            background: #101937;
            color: $white;
            .jx-virtual-machine-header-logo{
                margin-left: 40px;
                font-size: 16px;
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 1;
                margin-top: 30px;
            }
            .jx-virtual-machine-nav{
                margin: 20px 0 0 30px;
                float: left;
                height: 40px;
                line-height: 40px;
                span{
                    width: 90px;
                    color: $white;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 5px 5px 0 0;
                    transition: .3s;
                    // &:hover{
                    //     background: $white;
                    //     color: #101937;
                    // }
                    &.active{
                        background: $white;
                        color: #101937;
                    }
                }
            }
            .jx-virtual-machine-nav2{
                width: 50%;
                float: right;
                @extend .jx-virtual-machine-nav;
            }
            .jx-virtual-machine-header-info{
                margin-right: 40px;
                height: 60px;
                span{
                    vertical-align: top;
                }
                i{
                    font-size: 18px;
                    margin-left: 12px;
                    cursor: pointer;
                    vertical-align: -webkit-baseline-middle;
                }
            }
        }
        .jx-virtual-machine-main{
            position: relative;
            width: 100%;
            height: 100%;
            background: $white;
            overflow: hidden;
            .step-main-content{
                height: 100%;
                overflow-x: scroll;
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 0;
                }

                &::-webkit-scrollbar-thumb {
                    background: #c1c1c1;
                }
                .step-main-content-text{
                    width: 100%;
                    background: $white;
                    margin-top: 10px;
                    .display-hide-btn{
                        float: right;
                        margin: 10px 10px 20px 0;
                    }
                }
                .step-main-btn-box{
                    overflow: hidden;
                    padding: 12px 16px 15px 15px;
                    text-align: right;
                    i{
                        color: #385899;
                        font-size: 16px;
                        line-height: 16px;
                        vertical-align: top;
                        cursor: pointer;
                    }
                }
                .step-main-btn-group{
                    text-align: center;
                    margin-top: 20px;
                    button{
                        width: 90px;
                        &:first-child{
                            // background: $btn-blue;
                            // color: #fff;
                            margin-right: 5px;
                        }
                    }
                }
            }
            .step-main-mirror{
                position: relative;
                width: 65%;
                height: 100%;
                // overflow-x: auto;
                // &::-webkit-scrollbar {
                //     width: 6px;
                // }
                // &::-webkit-scrollbar-thumb {
                //     background: #4d5368;
                //     border-radius: 6px;
                // }
                .mirror-iframe-tip{
                    text-align: center;
                    img{
                        margin-top: 20%;
                    }
                    .mirror-iframe-tip-text{
                        display: block;
                        font-size: 16px;
                        color: #727272;
                        margin: 28px 0 18px;
                    }
                }
                .step-main-mirror-dialog{
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 144px;
                    box-sizing: border-box;
                    background: #2e2f33;
                    transition: .3s;
                    .step-main-mirror-dialog-block{
                        height: 100%;
                        overflow-x: scroll;
                        padding: 0 24px;
                        &::-webkit-scrollbar {
                            width: 3px;
                            height: 0;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: $white;
                        }
                    }
                    .mirror-dialog-header{
                        font-size: 14px;
                        line-height: 18px;
                        color: $white;
                        padding: 20px 0;
                        h2{
                            font-weight: normal;
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                        span{
                            font-size: 18px;
                            line-height: 18px;
                            font-weight: 400;
                            vertical-align: bottom;
                        }
                    }
                    .mirror-dialog-item{
                        border-top: solid 1px rgba(255, 255,255, .3);
                        padding: 15px 0;
                        .item-btn{
                            position: relative;
                            line-height: 40px;
                            font-size: 14px;
                            color: $white;

                            span{
                                cursor: pointer;
                                &:hover{
                                    color: #1277eb;
                                }
                            }
                            i{
                                // float: left;
                                width: 22px;
                                text-align: left;
                                // margin-right: 5px;
                                display: inline-block;
                                vertical-align: -webkit-baseline-middle;
                                &.icon-guanbifenxiang{
                                    font-size: 14px;
                                }
                                &:hover{
                                    color: #1277eb;
                                }
                            }
                        }
                    }
                }
                .step-main-mirror-arrow{
                    position: absolute;
                    top: 20%;
                    right: 144px;
                    width: 22px;
                    height: 80px;
                    line-height: 80px;
                    text-align: center;
                    background: #2e2f33;
                    border-radius: 4px 0 0 4px;
                    padding: 5px 0;
                    cursor: pointer;
                    transition: .2s;
                    div{
                        color: #fff;
                        font-size: 14px;
                        width: 22px;
                        line-height: 26px;
                        // &:after{
                        //     content: '\003C';
                        // }
                        // &.active{
                        //     &:after{
                        //         content: '\003E';
                        //     }
                        // }
                    }
                }
                .step-main-mirror-side{
                    position: absolute;
                    bottom: 50px;
                    right:150px;
                    // width: 240px;
                    height: 60px;
                    background: #1c1f21;
                    color: $white;
                    text-align: center;
                    border-radius: 5px;
                    z-index: 2;
                    li{
                        float: left;
                        width: 60px;
                        height: 36px;
                        display: block;
                        font-size: 12px;
                        margin-top: 14px;
                        position: relative;
                        cursor: pointer;
                        border-right: solid 1px #353636;
                        box-sizing: border-box;
                        &:hover{
                            color: #dfdfdf;
                        }
                        &:last-child{
                            border-right: none;
                        }
                        .iconfont{
                            display: block;
                            margin-bottom: 2px;
                            font-size: 20px;

                        }

                    }
                }
            }
        }
        //分享
        .dialog-share{
            .button-style{
                width: 90px;
            }

            .dialog-content{
                .share-item{
                    width: 280px;
                    height: 28px;
                    line-height: 28px;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 14px;
                    color: $title-gray;
                    margin-top: 20px;
                    span{
                        float: left;
                        width: 210px;
                        border-right: solid 1px #e8e8e8;
                        padding-right: 38px;
                        text-align: right;
                        box-sizing: border-box;
                    }
                    .el-switch{
                        float: left;
                        margin: 4px 0 0 30px;
                    }
                }
            }
        }
        //分享桌面
        .dialog-share-desktop{
            .share-desktop-item{
                margin-bottom: 35px;
                &:last-child{
                    margin-bottom: 0;
                }
                .item-label{
                    float: left;
                    width: 155px;
                    height: 32px;
                    line-height: 32px;
                    text-align: right;
                    font-size: 14px;
                    color: $title-gray;
                }
                .el-radio-group{
                    margin-top: 8px;
                }
            }
        }
        //实验截图
        .dialog-screenshot{
            .dialog-content{
                img{
                    width: 763px;
                    height: 440px;
                }
            }
        }
        //学生手册
        .dialog-handbook{
            p{
                font-size: 14px;
                color: $title-gray;
                text-align: center;
                line-height: 48px;
                span{
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .handbook-item{
                .item-label{
                    float: left;
                    width: 155px;
                    height: 48px;
                    line-height: 48px;
                    text-align: right;
                    font-size: 14px;
                    color: $title-gray;
                }
                .el-radio-group{
                    margin-top: 17px;
                }
            }
        }
        //手册拖拽
        .dialog-hand-book{
            position: absolute;   /*定位*/
            top: 20%;
            left: 40%;
            width: 800px;
            height: 484px;
            overflow: hidden;
            .v-note-wrapper{
                height: 100%;
            }
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                width: 100%;
                margin-top: 0 !important;
                .el-dialog__body{
                    overflow-x: scroll;
                    &::-webkit-scrollbar {
                        width: 5px;
                        height: 0;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c1c1c1;
                    }
                    .dialog-body{
                        height: 300px;
                    }
                }
            }
        }
        // 实验笔记拖拽
        .dialog-hand-note{
            position: absolute;   /*定位*/
            top: 30%;
            left: 30%;
            width: 800px;
            height: 484px;
            overflow: hidden;
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                width: 100%;
                margin-top: 0 !important;
                .el-dialog__body{
                    overflow: auto;
                    .dialog-body{
                        height: 300px;
                    }
                }
            }
        }
        //sftp上传弹窗样式
        .sftp-dialog{
            .el-dialog__body {
                padding: 38px 50px 30px;
            }
            .sftp-content{
                .sftp-header{
                    border-bottom: solid 2px #dfdfdf;
                    padding-bottom: 25px;
                    margin-bottom: 25px;
                    p{
                        span{
                            color: #5281c6;
                        }
                    }
                }
                p {
                    font-size: 16px;
                    line-height: 30px;
                }
                .sftp-title{
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                .sftp-desc{
                    p{
                        span{
                            padding: 5px 10px;
                            border-radius: 5px;
                            background: #eeeeee;
                            font-size: 14px;
                            margin: 0 5px;
                        }
                        i{
                            margin-left: 5px;
                            color: #5281c6;
                            position: relative;
                            &:last-child{
                                margin-left: 40px;
                            }
                            img{
                                position: absolute;
                                right: -28px;
                                top: -20px;
                            }
                        }
                    }
                    .desc-item{
                        // overflow-y: scroll;
                        // &::-webkit-scrollbar {
                        //     width: 3px;
                        // }

                        // &::-webkit-scrollbar-thumb {
                        //     background: #5281c6;
                        // }
                    }
                }
            }
        }
        //实训项目制作剪切板
        .cut-dialog{
            .cut-title{
                margin-bottom: 15px;
                p{
                    font-size: 14px;
                    span{
                        font-size: 16px;
                    }
                }
            }
            .el-form{
                .el-form-item{
                    .el-form-item__content{
                        height: auto;
                    }
                    .desc-num{
                        float: right;
                        margin-top: 170px;
                        color: #bbb;
                    }
                    .el-textarea {
                        float: left;
                        width: 85%;
                        textarea{
                            height: 200px;
                            resize: none;
                        }
                        .el-textarea__inner {
                            min-height: 200px;
                            overflow-y: scroll;

                            &::-webkit-scrollbar {
                                width: 5px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background: #6589ae;
                                border-radius: 2px;
                            }
                        }
                    }
                }

            }
        }
        // 上传流程
        .common-tool-dialog{
            .el-input{
                float: left;
            }
            .version-file{
                padding: 0 40px;
                .el-form-item{
                    margin-bottom: 0;
                }
                .el-button{
                    float: left;
                    position: relative;
                    background: #1277eb;
                    color: #fff;
                    border-radius: 5px;
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    cursor: pointer;
                    span{
                        display: block;
                        cursor: pointer;
                    }
                }
                input{
                    position: absolute;
                    width: 100px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background:#cc281a;
                    opacity: 0;
                    cursor: pointer;
                }
            }
        }
        // 学生手册显隐
        .dialog-display-hide{
            .el-table .blue-row {
                background: #f5f7fb;
            }
        }
        // 镜像保存弹窗
        .dialog-mirror-save{
            .el-form{
                .el-form-item{
                    position: relative;
                    .el-form-item__content{
                        height: auto;
                    }
                    .el-input{
                        .el-input__inner{
                            width:230px;
                        }
                    }
                    .el-textarea{
                        height: 180px;
                        .el-textarea__inner{
                            width:600px;
                            resize: none;
                        }
                    }
                }
            }
            .distribution-swpier{
                position: relative;
                width: 700px;
                height: 64px;
                margin-bottom: 35px;
                margin-left: 55px;
                margin-top: 15px;
                .swiper-btn{
                    background-image: none;
                    outline: 0;
                    top: 46px;
                    i{
                        font-size: 20px;
                        color: #b1b1b1;
                        &:hover{
                            color: #474747;
                        }
                    }
                }
                .swiper-button-prev{
                    left: -35px;
                }
                .swiper-button-next{
                    right: -35px;
                }
            }
            .distribution-box{
                position: relative;
                width: 100%;
                height: 64px;
                line-height: 64px;
                background: #fff;
                border: solid 1px #d9d9d9;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
                &:hover{
                    border-color: #1277eb;
                }
                i{
                    position: absolute;
                    bottom: 28px;
                    right: 8px;
                    font-size: 14px;
                    color: #3fdb9b;
                    width: 14px;
                    height: 14px;
                }
            }
        }
        // 图片放大

        .bigger-dialog{
            .el-dialog{
                width: min-content;
            }
            .el-dialog__header{
                display: none;
            }
            .el-dialog__body{
                padding: 0;
                background: transparent;
                text-align: center;
            }
        }
    }
</style>

